<template>
    <div class="login-box flex align-center justify-center">
        <el-row :gutter="0">
            <el-col :span="24">
                <el-tabs v-model="loginForm.login_type" stretch @tab-click="handleClick">
                    <el-tab-pane label="短信登录" name="mobile">
                        <el-form v-if="loginForm.login_type==='mobile'" :model="loginForm" label-width="0">
                            <el-form-item label="">
                                <el-input v-model="loginForm.name" placeholder="手机号"/>
                            </el-form-item>
                            <el-form-item label="">
                                <div class="flex flex-sub">
                                    <el-input v-model="captcha" class="margin-right-5" placeholder="图形验证码"/>
                                    <captchaTemp ref="captchaTempRef"></captchaTemp>
                                </div>
                            </el-form-item>
                            <el-form-item label="">
                                <div class="flex">
                                    <el-input v-model="loginForm.sms_code" class="margin-right-5"
                                              placeholder="短信验证码"/>
                                    <el-button type="primary" @click="sendCode">发送验证码</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width:100%" type="primary" @click="onSubmit">登录</el-button>
                            </el-form-item>
                            <el-form-item>
                                <div class="flex justify-between flex-sub">
                                    <div style="cursor: pointer" @click="toRegister">去注册</div>
                                    <div style="cursor: pointer" @click="handleForget">忘记密码?</div>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="密码登录" name="passwd">
                        <el-form v-if="loginForm.login_type==='passwd'" :model="loginForm" label-width="0">
                            <el-form-item label="">
                                <el-input v-model="loginForm.name" placeholder="可填用户名或手机号"/>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="loginForm.password" placeholder="密码" show-password/>
                            </el-form-item>
                            <el-form-item label="">
                                <div class="flex flex-sub">
                                    <el-input v-model="captcha" class="margin-right-5" placeholder="图形验证码"/>
                                    <captchaTemp ref="captchaTempRef"></captchaTemp>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width:100%" type="primary" @click="onSubmit">登录</el-button>
                            </el-form-item>
                            <el-form-item>
                                <div class="flex justify-between flex-sub">
                                    <div style="cursor: pointer" @click="toRegister">去注册</div>
                                    <div style="cursor: pointer" @click="handleForget">忘记密码?</div>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <div class="copyright"><a href="https://beian.miit.gov.cn" target="_blank">粤ICP备2022012464号-4</a></div>
    </div>
</template>

<script lang="ts" setup="">
    import {setToken} from "../../plugins/cookie";
    import {onMounted, reactive, ref} from "vue";
    import {useRouter} from "vue-router";
    import captchaTemp from '../../components/captchaTemp.vue'
    import {loginAuth, loginSMS} from "../../http/common";
    import {ElMessage} from "element-plus";
    import {userInfo} from "../../http/user";
    import useUserStore from '../../store/user'

    console.log("NODE_ENV", import.meta.env.VITE_API_URL);
    const store = useUserStore()
    const router = useRouter()
    const captchaTempRef = ref('') //图形验证码组件实例
    const captcha = ref('') //输入的图形验证码

    const loginForm = reactive({
        login_type: 'mobile',
        name: '',
        password: '',
        sms_code: ''
    })

    //去注册
    const toRegister = (() => {
        router.push({
            path: '/register'
        })
    })
    //忘记密码
    const handleForget = () => {
        router.push({
            path: '/setPassWord',
            query: {
                type: "forget"
            }
        })
    }

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        captcha.value = ''
    }

    //发送验证码
    const sendCode = () => {
        if (!captcha.value) {
            ElMessage.error('请先输入图形验证码')
            return;
        } else {
            let paramsData = {
                mobile: loginForm.name,
                captcha: captcha.value,
                key: captchaTempRef.value.captchaKey
            }
            loginSMS(paramsData).then(res => {
                console.log("res", res)
                const {code} = res
                if (code === 0) {
                    ElMessage({
                        message: '短信发送成功',
                        type: 'success',
                    })
                }
            })
        }
    }

    //登录
    const onSubmit = (() => {
        let paramsData = {}
        if (loginForm.login_type === 'mobile') {
            paramsData = JSON.parse(JSON.stringify(loginForm));
        } else {
            paramsData = Object.assign({}, loginForm, {
                captcha: captcha.value,
                key: captchaTempRef.value.captchaKey
            })
        }
        console.log("123", paramsData)
        loginAuth(paramsData).then(res => {
            const {code, data} = res
            const token = data?.token
            console.log("data", data, token.access_token)
            if (code === 0) {
                setToken(token.access_token);

                userInfo().then(res => {
                    const {data} = res;
                    console.log("userInfo", data)
                    store.setUserMsg(data)
                    router.push({
                        path: '/home'
                    })
                })


            }
        })

    })
</script>

<style>
    .el-input{
        height: 32px;
    }
</style>

<style lang="scss" scoped>
  @import "@/assets/css/variables.scss";

  .login-box {
    height: 100vh;
    margin: 0 auto;
  }
  .copyright{
    position: fixed;
    bottom:20px;
    text-align: center;
  }
</style>
